<template>
    <!--        新增编辑弹框-->
    <CommonModal
        v-model="state.visible"
        @handleOk="handleOk"
        @handleCancel="handleCancel"
        :title="state.modalTitle"
    >
        <a-form
            class="form_box"
            ref="formRef"
            name="custom-validation"
            :model="formState"
            :rules="rules"
            v-bind="layout"
        >
            <a-form-item has-feedback label="上级字典" name="typeId" :colon="false" v-if="formState.typeId">
                <a-tree-select
                    v-model:value="formState.typeId"
                    show-search
                    style="width: 100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="Please select"
                    allow-clear
                    tree-default-expand-all
                    :tree-data="treeData"
                    :field-names="{
                        children: 'children',
                        label: 'name',
                        value: 'id',
                    }"
                    tree-node-filter-prop="name"
                ></a-tree-select>
            </a-form-item>
            <a-form-item has-feedback label="字典名称" name="name" :colon="false">
                <a-input v-model:value="formState.name" autocomplete="off" />
            </a-form-item>
            <a-form-item has-feedback label="值" name="value" :colon="false" v-if="formState.typeId">
                <a-input v-model:value="formState.value" autocomplete="off" />
            </a-form-item>
            <a-form-item has-feedback label="code" name="code" :colon="false">
                <a-input v-model:value="formState.code" autocomplete="off" />
            </a-form-item>
            <a-form-item has-feedback label="排序" name="sort" :colon="false">
                <a-input v-model:value="formState.sort" autocomplete="off" />
            </a-form-item>
            <a-form-item label="字典状态" name="status" :colon="false">
                <a-radio-group v-model:value="formState.status">
                    <a-radio :value="1">启用</a-radio>
                    <a-radio :value="2">停用</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="字典级别" name="type" :colon="false" v-if="(formState.type && formState.id) || (!formState.typeId && !formState.id)">
                <a-radio-group v-model:value="formState.type">
                    <a-radio :value="1">系统级</a-radio>
                    <a-radio :value="2">业务级</a-radio>
                </a-radio-group>
            </a-form-item>
        </a-form>
    </CommonModal>
</template>
<script setup>
import {reactive, ref} from "vue";
import {dictAdd, dictDataAdd, dictDataEdit, dictEdit} from "@/service/api";
import {message} from "ant-design-vue";
const props = defineProps({
    typeIdArr: {
        default: ()=>[],
        type: Array
    },
    treeData: {
        default: ()=>[],
        type: Array
    }
})

const state = reactive({
    visible: false,
    modalTitle: '',
    options: []
})
const emit = defineEmits(['success'])
const formRef = ref();

// 新增编辑数据
const defaultFormState = {
    id: null,  // 新增编辑id
    typeId: '', // 上级字典id
    code: '', // 字典code
    value: '', // 字典值
    name: '', // 字典名称
    status: 1, // 字典状态
    sort: '', // 排序
    type: 1 // 字典级别
}
let formState = reactive({
    ...defaultFormState
})
const rules = {
    name: [{required: true}],
    sort: [{required: true}],
    type: [{required: true}],
    status: [{required: true}],
    value: [{required: false}],
    code: [{required: true}]
};
const layout = {
    labelCol: {
        span: 5
    },
    wrapperCol: {
        span: 12,
    },
};
const handleOk = () => {
    formRef.value.validateFields().then(()=>{
        let params = {
            ...formState
        }
        if(!params.id) {
            if(params.typeId) {
                delete params.type
                dictDataAdd(params).then(res=>{
                    if(res.status =='000_0000_0000'){
                        state.visible = false
                        formRef.value.resetFields()
                        message.success('添加成功')
                        emit('success')
                    }else{
                        message.warning(res.msg)
                    }
                })
            }else{
                dictAdd(params).then(res=>{
                    if(res.status =='000_0000_0000'){
                        state.visible = false
                        formRef.value.resetFields()
                        message.success('添加成功')
                        emit('success')
                    }else{
                        message.warning(res.msg)
                    }
                })
            }
        }else{
            if(params.typeId) {
                dictDataEdit(params).then(res=>{
                    if(res.status =='000_0000_0000'){
                        state.visible = false
                        formRef.value.resetFields()
                        message.success('编辑成功')
                        emit('success')
                    }else{
                        message.warning(res.msg)
                    }
                })
            }else{
                dictEdit(params).then(res=>{
                    if(res.status =='000_0000_0000'){
                        state.visible = false
                        formRef.value.resetFields()
                        message.success('编辑成功')
                        emit('success')
                    }else{
                        message.warning(res.msg)
                    }
                })
            }

        }
        return true
    }).catch(err=>{
        return false
    })
}
const handleCancel = () => {
    formRef.value.resetFields()
    formState = reactive({...defaultFormState})
}
// 弹框展示
const showModal = (obj) => {
    state.visible = true
    state.modalTitle = obj.title
    if(obj.id) {
        // 处理回显
        Object.keys(formState).forEach(item=>{
            formState[item] = obj[item]
        })
    }
    // 处理父级
    formState.typeId = obj.typeId === '0' ? '' : obj.typeId
}
defineExpose({showModal})
</script>
<style scoped lang="less">
.form_box{
    input,:deep(.nmc-select-selector){
        width: 200px!important;
        height: 32px;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 6px;
        border: 1px solid #E0E0E0;
    }
    .nmc-radio-group{
        width: 250px;
    }
}
</style>
